<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>计算属性</title>
</head>
<body>
<div id="app">
  方法不会有缓存，computed会根据依赖(归vue管理的数据，可以响应式变化的)的属性进行缓存<br>
  两部分组成有get和set(不能只写set) 一般情况下 通过js赋值影响其他人或者表单元素设置值的时侯会调用set方法<br>
  computed 不支持异步<br>

  全选<input type="checkbox" v-model="checkAll"><br/>
  <input type="checkbox" v-for="p in products" v-model="p.isSelected">

  <p>
  <input type="text" v-model="a"> {{msg}}
</div>

</body>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>

  let vm =  new Vue({
    el: '#app',
    computed:{  //computed 不支持异步
      checkAll:{
        get(){  //返回什么结果 就会赋值给get
          return this.products.every(item => item.isSelected);
        },
        set(val){ //val值为选择的值
          this.products.forEach(item => item.isSelected = val);
        }
      },
      msg:{
        get(){
          if(this.a.length < 3){
            return '少了';
          }

          if(this.a.length >6){
            return '多了';
          }

          return '';
        }
      }
    },
    data:{
      products:[{isSelected:true},{isSelected:true}],
      a:''
    }

  })


</script>
</html>
